<template>
  <div class="LibraryImage" v-if="item!=null">
    <div class="wrap" v-if="item.imageStatus==2">
      <el-image class="img" :preview-src-list="previewList" :initial-index="initialIndex" :src="item.imageUrl + '?x-oss-process=image/resize,w_350/format,jpg/quality,q_80'" :preview-teleported="true" lazy :fit="'cover'" ></el-image>
    </div>
    <div class="tips" v-else>
      <div class="txt">{{ item.imageStatus==1?'图片生成中':'图片加载失败' }}</div>
    </div>
    <div class="infoBar">
      <div class="title" v-if="item.title != null && item.title!=''">{{ item.title }}</div>
      <div class="info">
        <div class="date">{{ item.createTime }}</div>
        <div class="ctrl">
          <a href="#" class="btn" v-if="selectMode" @click="selected">选择</a>
          <a href="#" class="more" v-else><el-icon><MoreFilled /></el-icon></a>
        </div>
      </div>
    </div>
  </div>
</template>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .LibraryImage{ width: 100%; overflow: hidden; border-radius: 4px;}
  .LibraryImage .wrap{width: 100%; overflow: hidden; background: #eee; padding-top: 100%; position: relative; overflow: hidden;}
  .LibraryImage .wrap .img{width: 100%; height: 100%; display: block; margin: 0; position: absolute; left: 0; top: 0;transition: transform 0.3s ease; }
  .LibraryImage:hover .wrap .img{transform: scale(1.2);}
  .LibraryImage .tips{width: 100%; overflow: hidden; background: #eee; padding-top: 100%; position: relative; overflow: hidden;}
  .LibraryImage .tips .txt{width: 100px; height: 20px;line-height:20px;  text-align: center; position: absolute; left: 50%; top: 50%; margin: -10px 0 0 -50px; color: #fff; display: block; font-size: 14px;background: linear-gradient(45deg,#df00ff,#7117ff,#00ffe0); border-radius: 10px;}
  .LibraryImage .infoBar{width: 100%; padding: 0; background: #fff; padding: 12px 6px 12px 12px; box-sizing: border-box;}
  .LibraryImage .infoBar .title{ text-align: left; font-size: 14px; font-weight: bold; line-height: 18px; padding: 12px 0;}
  .LibraryImage .infoBar .info{display: flex;}
  .LibraryImage .infoBar .info .date{font-size: 12px; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color:  #999; flex: 1; text-align: left;}
  .LibraryImage .infoBar .info .ctrl{ width:  40px; height: 20px; font-size: 12px; color: #999;}
  .LibraryImage .infoBar .info .ctrl .more{ border: none; background: none; display: block; height: 20px; width: 40px; text-align: center; padding: 0; margin: 0; line-height: 20px; color: #999;}
  .LibraryImage .infoBar .info .ctrl .btn{ height: 20px; width: 40px; text-align: center; color: #fff; background: #2c3e50; font-size: 12px; line-height: 20px; border-radius: 12px; display: block; text-decoration: none;}
</style>

<script>
export default {
  name: 'LibraryImage',
  props: {
    item:null,
    previewList: {
      type: Array,
      value: []
    },
    initialIndex: 0,
    selectMode: {
      type: Boolean,
      value: false
    }
  },
  data () {
    return {
    }
  },
  methods: {
    selected () {
      this.$emit('selected',this.item)
    },
  }
}
</script>
